<template>
  <div class="m-page">
    <div class="bucket-wrapper">
      <div class="bucket">
        <div class="ripple ripple1"></div>
        <div class="ripple ripple2"></div>
        <div class="ripple ripple3"></div>
      </div>
      <div class="mask"></div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="stylus" scoped>
$rate = 50%

@keyframes rotate
  0%
    transform: translate(-50%, 0) rotateZ(0deg)
  50%
    transform: translate(-50%, -2%) rotateZ(180deg)
  100%
    transform: translate(-50%, 0%) rotateZ(360deg)

.m-page
  .bucket-wrapper
    width 400px
    height 600px
    position relative
    background #eee
    .bucket, .mask
      position absolute
      top 0
      left 0
      width 100%
      height 100%
    .mask
      background url('../assets/bg.png') center center / 100% 100% no-repeat
    .bucket
      background-color rgb(118, 218, 255)
      overflow hidden
      .ripple
        position absolute
        left 50%
        bottom $rate
        width 800px
        height 800px
        background #eee
        animation-name rotate
        animation-iteration-count infinite
        animation-timing-function linear
        &.ripple1
          opacity .6
          border-radius 45%
          animation-duration 15s
        &.ripple2
          opacity .8
          border-radius 40%
          animation-duration 18s
        &.ripple3
          opacity .5
          border-radius 37%
          animation-duration 10s
</style>
